<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>生产线产能设置</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <!--添加按钮-->
    <el-button type="warning" icon="el-icon-plus" @click="dialogFormVisible = true">添加产线</el-button>
    <!--表格-->
    <template>
        <el-table
                :data="tProductionLines"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="productionName"
                    label="名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="productionCapacity"
                    label="生产能力"
                    width="180">
                <template slot-scope="scope">
                    <span>{{scope.row.productionCapacity}}组/天</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="principal"
                    label="负责人">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="产线人数">
                <template slot-scope="scope">
                    <span>{{scope.row.num}}人</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="生产状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 0" style="color: red">未生产</span>
                    <span v-if="scope.row.state == 1" style="color: red">正在生产</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注">
                <template slot-scope="scope">
                    <span v-if="scope.row.remark != null">{{ scope.row.remark }}</span>
                    <span v-if="scope.row.remark != null">无备注</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="medium"
                            icon="el-icon-edit-outline"
                            @click="updateTPL(scope.$index,scope.row)"></el-button>
                    <el-button
                            type="warning"
                            size="medium"
                            icon="el-icon-delete-solid"
                            @click="deleteTPL(scope.$index,scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--对话框-->
    <el-dialog title="生产线产能设置" :visible.sync="dialogFormVisible" @close="aa">
        <el-form :model="tProductionLine">
            <el-form-item label="名称:" :label-width="formLabelWidth">
                <el-input v-model="tProductionLine.productionName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生产能力(组/天):" :label-width="formLabelWidth">
                <el-input type="number"  v-model="tProductionLine.productionCapacity" autocomplete="off"></el-input>
                <span v-if="tProductionLine.productionCapacity<0" style="color: red">生产能力不能为负数</span>
            </el-form-item>
            <el-form-item label="负责人:" :label-width="formLabelWidth">
                <el-input v-model="tProductionLine.principal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产线人数:" :label-width="formLabelWidth">
                <el-input type="number" v-model="tProductionLine.num" autocomplete="off"></el-input>
                <span v-if="tProductionLine.num<0" style="color: red">产线人数不能为负数</span>
            </el-form-item>
            <el-form-item label="生产状态:" v-if="showState" :label-width="formLabelWidth">
                <el-select v-model="tProductionLine.state" placeholder="请选择生产状态">
                    <el-option label="正在生产" value="1"></el-option>
                    <el-option label="未生产" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth">
                <el-input v-model="tProductionLine.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveTProductionLine">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                tProductionLines: null,
                dialogFormVisible: false,
                showState: false,    //生产状态
                formLabelWidth: '150px',//表单标签的宽度
                tProductionLines: null, //所有生产产线
                tProductionLine: {
                    id: '',
                    productionName: '',
                    productionCapacity: '',
                    principal: '',
                    num: '',
                    state: '',
                    remark: '',
                }
            }
        },
        methods:{
            //查询全部生产线产能设置
            selectAllTPL(){
                this.tProductionLines=null;
                axios.get("/allProductionLine").then(value => {
                    if (value.data.code == 1){
                        this.tProductionLines=value.data.data;
                    }
                })
            },
            //打开对话框并显示数据
            updateTPL(index, row){
                this.tProductionLine = row;
                this.dialogFormVisible = true;
                this.showState = true;
            },
            //关闭对话框时调用
            aa(){
                this.selectAllTPL();
                this.clean();
            },
            //保存生产线产能设置
            saveTProductionLine(){
                //判断有id进行更新，否则添加
                if (this.tProductionLine.id == ''){
                    axios.post("/allProductionLine",this.tProductionLine).then(value => {
                        if (value.data.code == 1){
                            this.$message("添加生产线产能设置成功!");
                            this.selectAllTPL();
                            this.clean();
                        }
                    })
                }else {
                    axios.put("/allProductionLine",this.tProductionLine).then(value => {
                        if (value.data.code==1){
                            this.$message("修改生产线产能设置成功!");
                            this.selectAllTPL();
                            this.clean();
                        }
                    })
                }
            },
            //删除
            deleteTPL(index, row){
                console.log(row.id)
                axios.delete("/allProductionLine/"+row.id).then(value => {
                    if (value.data.code == 1){
                        this.selectAllTPL();
                    }
                })
            },
            //清理对话框
            clean(){
                this.dialogFormVisible = false;
                this.showState = false;
                this.tProductionLine = {
                    id: '',
                    productionName: '',
                    productionCapacity: '',
                    principal: '',
                    num: '',
                    state: '',
                    remark: '',
                }
            }
        },
        mounted(){
            this.selectAllTPL();
        },
    })
</script>
</body>
</html>